<template>
	<view>
		<view class="content">



			<z-paging ref="paging" v-model="workOrderList" @query="queryList" :topZIndex="99999" :bottomZIndex="999999">
				<template #top>
					<!-- 悬浮按钮_扫码 -->
					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="80" @btnClick="ToScanBtn">
						<template #BtnContent>
							<u-icon name="scan" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>
					<u-navbar :fixed="false" title="派工单" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
						leftIconColor="#fff" style="width: 100%;">
						<view class="u-nav-slot" slot="right">
							<m-capsule></m-capsule>
						</view>
					</u-navbar>
					<view class="SearchBox">

						<u-search :showAction="true" v-model="searchValue" :placeholder="CheckedSearchData.placeholder"
							searchIcon=" " shape="square" actionText="搜索" @search="OnSearch" @custom="OnSearch"
							:actionStyle="{color:'#fff'}" :animation="false">
							<template v-slot:label>
								<m-dropdown-menu :options="SearchCheckList" v-model="CheckedSearchData" KeyID="value"
									marginTop="10" zIndex="999999" @selectItem="ChoiceCell">
									<template #default="{element}">
										<view class="x-f MenuText" :style="{color: element ? '#3d9edf' : '#333'}">
											<text>{{CheckedSearchData['text']}}</text>
											<u-icon name="arrow-down-fill" :class="{'rotate-icon': element}"
												:color="element ? '#3d9edf' : '#333'" size="10"
												style="margin-left: 4px;"></u-icon>
										</view>
									</template>
								</m-dropdown-menu>
							</template>
						</u-search>
					</view>


					<view class="TabsBox">
						<m-scroll-tag @tabChange="changeTab" :tagsList="workOrderStatus" bgColor="#52b583">
							<view slot="right">
								<view class="IconBoxs x-f">
									<uni-icons fontFamily="CustomFontPlatform"
										style="margin-left: 14px;font-weight: 600;" color="#999" @click="OpenSortPopup"
										:class="sortData.Sort.value.toLowerCase() == 'desc' ? '' : 'icon-flip-vertical'"
										:size="20">{{ $utils.toUniCode('&#xe7e9;')}}</uni-icons>

									<view class="x-end">
										<uni-icons fontFamily="CustomFontPlatform"
											style="margin-left: 14px;font-weight: 600;" color="#999"
											@click="OpenFilterPopup"
											:size="20">{{$utils.toUniCode('&#xe628;')}}</uni-icons>

										<text style="zoom: .7;color: #999;font-weight: 600;">{{FilterNums}}</text>
									</view>
								</view>
							</view>
						</m-scroll-tag>
					</view>
				</template>

				<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
				<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
				<view style="padding: 0 10px;">

					<view class="CardBox" @click="ToPageInfo(row)" v-for="(row, index) in workOrderList" :key="index">

						<!-- more小点 -->
						<!-- <view @click="ShowChangeStatus = true" class="RightTop">

							<view class="IconBox">
								<uni-icons type="more-filled" size="24" color="#747474"></uni-icons>
							</view>
						</view> -->

						<view class="CardMainBox">

							<view class="CardTop">
								<view v-if="row.FStateName" class="OrderStatus" :class="GetStatusBackClass(row.FState)">
									{{row.FStateName}}
								</view>
							</view>

							<view style="color:black;font-size:28rpx;margin-top:8px">
								<text>{{row.BillNO}}</text>
							</view>

							<view style="margin-top: 8px;">

								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="产品名称:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.ProductName}}</text>
											<text style="margin: 0 4px;">/</text>
											<text>{{row.ProductCode}}</text>
											<text style="margin: 0 4px;">/</text>
											<text>{{row.ProductSpec}}</text>
										</view>
									</template>
								</m-field>


								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="生产车间:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.FWorkshopName}}</text>
										</view>
									</template>
								</m-field>

								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="计划时间:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{BackDate(row.DueStartDate)}}</text>
											<text style="margin: 0 4px;">—</text>
											<text>{{BackDate(row.DueEndDate)}}</text>
										</view>
									</template>
								</m-field>

								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="工单进度:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.WCQty || 0}}</text>
											<text style="margin: 0 1px;">/</text>
											<text>{{row.FPlanQty}}</text>
											<text style="margin-left: 2px;">{{row.UnitName}}</text>
										</view>
									</template>
								</m-field>
							</view>

							<view v-show="row.Children.length">
								<Procedure-step :procedures="row.Children" :TheIndex="(index + 1)"
									:BText="{text:'外协',id:'Outsource'}"
									@circle-clicked="CircleClicked"></Procedure-step>

							</view>

						</view>
					</view>

				</view>

				<template #bottom>
					<zdy-tabbar style="width: 100%;" :current-page="currentID"></zdy-tabbar>
				</template>
			</z-paging>
		</view>



		<!-- 摄像头使用权限弹层组件 -->
		<m-permission ref="permissionDialog" title="相机/相册权限申请说明">
			于您使用该功能扫码，用于查询数据场景，你需要允许相机使用权限
		</m-permission>


		<!-- 进度列表弹层 -->
		<u-popup class="MainPopup" :show="showProcedure" mode="center" :round="12" zIndex="999999"
			@close="closeProcedure">
			<view class="ProgressBox">

				<view class="Type" :class="['Type_'+ProgressInfo.FState]">
					<text>{{ProgressInfo.FStateName}}</text>
				</view>

				<view>
					<text class="TitleName">{{ProgressInfo.ProcedureName}}</text>
				</view>

				<view style="margin-top: 4px;">
					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="任务进度:">
						<template v-slot:custom-value>
							<view class="x-f">
								<text>{{ProgressInfo.WCQty}}</text>
								<text>/</text>
								<text>{{ProgressInfo.FPlanQty}}</text>
							</view>
						</template>
					</m-field>
					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="良品数:" :value="ProgressInfo.FDailyQtt || 0" valueColor="#1acf4e">
					</m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="不良数:" :value="ProgressInfo.FNgQty || 0" valueColor="#f04c3c">
					</m-field>

					<!-- <m-field  valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="优先级:" value=" "></m-field> -->

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="完成数量:" :value="ProgressInfo.WCQty"></m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="计划数量:" :value="ProgressInfo.FPlanQty"></m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="可报数量:" :value="ProgressInfo.ReportQty"></m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="是否外协:" :value="ProgressInfo.Outsource ? '是' : '否'"></m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="生产车间:" :value="ProgressInfo.FWorkshopName"></m-field>
				</view>

			</view>
		</u-popup>

		<!-- 排序弹层 -->
		<u-popup class="MainPopup" :show="ShowSortPopup" mode="bottom" :round="12" zIndex="999999"
			@close="closeSortPopup">
			<view class="f-dc" style="max-height: 80vh;">
				<u-navbar :fixed="false" title="排序" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeSortPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="MainBox" style="padding: 15px;flex: 1;overflow: auto;padding-bottom: 20px;">
					<m-sort :sortOptions="sortOptions" :defaultSort="defaultSort" :sortFields="sortFields"
						:selectSort="sortData.Sort" @change="handleSortChange"></m-sort>
				</view>
			</view>
		</u-popup>


		<!-- 筛选弹层 -->
		<u-popup class="MainPopup" :show="ShowFilterPopup" mode="bottom" :round="12" zIndex="999999"
			@close="closeFilterPopup">
			<view class="f-dc" style="height: 80vh;">
				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeFilterPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="PopupMainBox">
					<view>
						<view class="TitleBox">
							<text>计划起止时间</text>
						</view>

						<view class="CheckBox">
							<view class="My_Picker_Box">
								<view class="PickMainBox">
									<u-icon name="calendar" color="#c0c4cc" size="24"></u-icon>

									<view class="My_Picker_Text" @click="OpenPicker('Start_Plan')">
										<text v-if="CheckedTimes_Plan[0]">{{dateFormat(CheckedTimes_Plan[0])}}</text>
										<text v-else>开始时间</text>
									</view>

									<text>至</text>

									<view class="My_Picker_Text" @click="OpenPicker('End_Plan')">
										<text v-if="CheckedTimes_Plan[1]">{{dateFormat(CheckedTimes_Plan[1])}}</text>
										<text v-else>结束时间</text>
									</view>

								</view>

								<view class="CloseIcon" v-if="CheckedTimes_Plan[0] || CheckedTimes_Plan[1]"
									@click="ClearPickerBtn('Plan')">
									<u-icon name="close-circle" color="#999" size="14"></u-icon>
								</view>
							</view>
						</view>
					</view>

					<view style="margin-top: 20px;">
						<view class="TitleBox">
							<text>实际起止时间</text>
						</view>

						<view class="CheckBox" style="margin-top: 20px;">
							<view class="My_Picker_Box">
								<view class="PickMainBox">
									<u-icon name="calendar" color="#c0c4cc" size="24"></u-icon>

									<view class="My_Picker_Text" @click="OpenPicker('Start_Actual')">
										<text
											v-if="CheckedTimes_Actual[0]">{{dateFormat(CheckedTimes_Actual[0])}}</text>
										<text v-else>开始时间</text>
									</view>

									<text>至</text>

									<view class="My_Picker_Text" @click="OpenPicker('End_Actual')">
										<text
											v-if="CheckedTimes_Actual[1]">{{dateFormat(CheckedTimes_Actual[1])}}</text>
										<text v-else>结束时间</text>
									</view>

								</view>

								<view class="CloseIcon" v-if="CheckedTimes_Actual[0] || CheckedTimes_Actual[1]"
									@click="ClearPickerBtn('Actual')">
									<u-icon name="close-circle" color="#999" size="14"></u-icon>
								</view>
							</view>
						</view>
					</view>

					<view style="margin-top: 20px;">
						<view class="TitleBox">
							<text>单据日期</text>
						</view>

						<view class="CheckBox" style="margin-top: 20px;">
							<view class="My_Picker_Box">
								<view class="PickMainBox">
									<u-icon name="calendar" color="#c0c4cc" size="24"></u-icon>

									<view class="My_Picker_Text" @click="OpenPicker('Start_BillDate')">
										<text
											v-if="CheckedTimes_BillDate[0]">{{dateFormat(CheckedTimes_BillDate[0])}}</text>
										<text v-else>开始时间</text>
									</view>

									<text>至</text>

									<view class="My_Picker_Text" @click="OpenPicker('End_BillDate')">
										<text
											v-if="CheckedTimes_BillDate[1]">{{dateFormat(CheckedTimes_BillDate[1])}}</text>
										<text v-else>结束时间</text>
									</view>

								</view>

								<view class="CloseIcon" v-if="CheckedTimes_BillDate[0] || CheckedTimes_BillDate[1]"
									@click="ClearPickerBtn('BillDate')">
									<u-icon name="close-circle" color="#999" size="14"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="BottomBox">

					<button class="SaveBtn" @click="ResetBtn">重置</button>
					<button class="SubBtn" @click="SubmitFilterBtn">确认</button>
				</view>

				<u-datetime-picker class="PickerClass" :show="ShowPicker" :closeOnClickOverlay="true"
					@confirm="ConfirmPickerBtn" @close="closePicker" v-model="PickerDate"
					mode="date"></u-datetime-picker>
			</view>
		</u-popup>
		<m-pda-scancode v-if="$utils.isPda()" listenName="pdaScanCode"
			:SetContent="{action:$store.state.systemConfig.sysDeviceInfo.broadcastAction,extra:$store.state.systemConfig.sysDeviceInfo.broadcastResult}"></m-pda-scancode>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				SearchCheckList: [{
						text: '默认',
						title: '派工单编号、产品编号、产品名称、产品规格',
						placeholder: '搜工单、查产品',
						value: 0,
						Checked: true,
					},
					{
						text: '派工单编号',
						title: '派工单编号',
						placeholder: '输入派工单编号搜索',
						value: 1,
						Checked: false,
					},
					{
						text: '产品编号',
						title: '产品编号',
						placeholder: '输入产品编号搜索',
						value: 2,
						Checked: false,
					}, {
						text: '产品名称',
						title: '产品名称',
						placeholder: '输入产品名称搜索',
						value: 3,
						Checked: false,
					}, {
						text: '产品规格',
						title: '产品规格',
						placeholder: '输入产品规格搜索',
						value: 4,
						Checked: false,
					}, {
						text: '生产车间',
						title: '生产车间',
						placeholder: '输入生产车间搜索',
						value: 5,
						Checked: false,
					}, {
						text: '销售单号',
						title: '销售单号',
						placeholder: '输入销售单号搜索',
						value: 6,
						Checked: false,
					},
				],
				CheckedSearchData: {},

				FilterNums: null, // 筛选项数量
				ShowPicker: false, // 时间选择器
				PickerDate: '', // 选中项数据
				CheckPick: '', // 选中项名称

				CheckedTimes_Plan: ['', ''], // 计划时间日期选择数据
				StartDate_Plan: null, // 计划开始时间
				EndDate_Plan: null, // 计划结束时间

				CheckedTimes_Actual: ['', ''], // 实际时间日期选择数据
				StartDate_Actual: null, // 实际开始时间
				EndDate_Actual: null, // 实际结束时间

				CheckedTimes_BillDate: ['', ''], // 单据日期选择数据
				StartDate_BillDate: null, // 单据日期开始时间
				EndDate_BillDate: null, // 单据日期结束时间

				sortFields: [{ // 升降序数据
						text: '升序',
						value: 'ASC'
					},
					{
						text: '降序',
						value: 'DESC'
					}
				],
				sortData: { // 选中的排序数据 
					OrderBy: '',
					Sort: {},
				},
				sortOptions: [{ // 排序数据
						id: "1",
						name: "单据日期",
						param: 'A.BillDate',
					},
					{
						id: "2",
						name: "派工单编号",
						param: 'A.BillNO',
					},
					{
						id: "3",
						name: "产品编号",
						param: 'D.ProductCode',
					},
					{
						id: "4",
						name: "产品名称",
						param: 'D.ProductName',
					},
					{
						id: "5",
						name: "产品规格",
						param: 'D.ProductSpec',
					},
					{
						id: "6",
						name: "计划开始时间",
						param: 'A.DueStartDate',
					},
					{
						id: "7",
						name: "计划完成时间",
						param: 'A.DueEndDate',
					},
				],
				defaultSort: "1", // 默认选中的排序id 
				searchValue: '', // 搜索框
				page: {
					pageIndex: 1,
					pageSize: 10,
				},
				searchData: {
					value: '',
					name: '全部'
				},
				workOrderStatus: [{ // Tab数据
						name: '全部',
						value: ''
					},
					{
						name: '未生产',
						value: 0
					},
					{
						name: '生产中',
						value: 3
					},
					{
						name: '已领料',
						value: 2
					},
					{
						name: '指定结束',
						value: -1
					},
					{
						name: '结束',
						value: 1
					}
				],

				currentID: null,
				workOrderList: [],
				showProcedure: false, // 环形选项弹层
				ShowChangeStatus: false, // 三个小点弹层
				ChoiceStatusData: '',
				StatusDataList: [{
						name: '未开始',
						value: 0,
						color: '#a8a8a8',
						BackgroundColor: '#f6f6f6',
						disabled: false
					},
					{
						name: '执行中',
						value: 1,
						color: '#2193f3',
						BackgroundColor: '#daedfe',
						disabled: false
					},
					{
						name: '已结束',
						value: 2,
						color: '#269b74',
						BackgroundColor: '#d9f7ed',
						disabled: false
					},
				],
				radioOptions: [{
						content: '加急',
						color: '#fff',
						contentActiveColor: '#f04c3c',
						TextIcon: 'rewind-right'
					},
					{
						content: '暂停',
						color: '#fff',
						contentActiveColor: '#999',
						TextIcon: 'pause'
					},
					{
						content: '无',
						color: '#269b74',
						contentActiveColor: '#d9f7ed',
						TextIcon: ''
					}
				],
				selectedItem: -1, // 弹层选中项
				timer: null, // 防抖
				SonTimer: null, // 进度防抖
				scrolltolowerTimer: null, // 列表触底的防抖
				TabTimer: null, // Tab切换的防抖

				ShowSortPopup: false, // 排序项弹层
				ProgressInfo: {}, // 任务进度数据

				ShowFilterPopup: false, // 筛选弹层

				request1: null, // 接口请求的promise
				request2: null, // 接口请求的promise

				BtnShow: false, // 按钮样式初始化有问题，等加载完再显示
				ChoiceCardInfo: {}, // 点击列表某项的数据
			};
		},
		onLoad(option) {
			var that = this;

			if (!that.$utils.isEmpty(option)) {
				this.currentID = +option.TabbarID;
			} else {
				this.currentID = 0;
			}

			// 搜索字段为默认
			this.CheckedSearchData = this.SearchCheckList[0];

			if (uni.getStorageSync('Dispatch_Sort')) {
				let data = JSON.parse(uni.getStorageSync('Dispatch_Sort'))

				this.sortData = data.sortData;
				this.defaultSort = data.defaultSort;
			} else {
				// 选中排序数据
				this.sortData.OrderBy = this.sortOptions[0]['param'];
				this.defaultSort = this.sortOptions[0]['id'];
				this.sortData.Sort = this.sortFields[1];
			}

		},
		mounted() {
			var that = this;

			that.$nextTick(() => {
				setTimeout(() => {
					that.BtnShow = true;
				}, 500)
			})

			if (that.$utils.isPda()) {
				uni.$on('scancodedate', function(content) {
					console.log("扫描到的内容为:", content)
					that.searchValue = content
				})
			}
			uni.$on('Refresh_DispatchList', function(ret) {
				setTimeout(() => {
					that.$nextTick(() => {
						that.$refs.paging.reload();
					})
				}, 300)
			});
		},
		onUnload() {
			var that = this;
			uni.$off('Refresh_List');
			if (that.$utils.isPda()) {
				uni.$off('scancodedate');
			}
			// 销毁页面时，销毁定时器，避免报错
			clearTimeout(that.timer);
			clearTimeout(that.SonTimer);
			clearTimeout(that.scrolltolowerTimer);
			clearTimeout(that.TabTimer);
			if (this.request1) {
				this.request1.requestTask.abort(); // 取消第一个请求
			}
			if (this.request2) {
				this.request2.requestTask.abort(); // 取消第二个请求
			}
		},
		methods: {
			queryList(pageNo) {
				let that = this;
				this.$utils.showLoading();
				let obj = {
					SearchKey: that.searchValue,
					Pageindex: pageNo,
					PageSize: 10,
					OrderBy: that.sortData.OrderBy,
					Sort: that.sortData.Sort['value'],
					FState: that.searchData.value,
					FBDate: that.dateFormat(that.CheckedTimes_Plan[0]) || '',
					FEDate: that.dateFormat(that.CheckedTimes_Plan[1]) || '',
					SearchItem: that.CheckedSearchData.value, // 根据什么搜索
				};

				try {

					that.Request.request('XGD_SelectJobList', obj, (ret) => {

						if (ret.status == 200) {
							// console.log(ret)
							// this.$utils.hideLoading();

							that.handleData(ret.data.ds, ret.data.ds2, ret.data.ds1[0]['Total']);
						} else {
							this.$utils.hideLoading();
							that.$refs.paging.complete(false);
						}

					}, err => {
						this.$utils.hideLoading();
						that.$refs.paging.complete(false);
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e)
					this.$utils.hideLoading();
					this.$utils.msg('请求失败请重试')
					that.$refs.paging.complete(false);
				}

			},
			ToPageInfo(data) { // 点击卡片盒子，前往编辑
				console.log(data)
				uni.navigateTo({
					url: '/st_ticket/DispatchList/CreateDispatch?JobOrderID=' + data.JobOrderID
				})
			},
			dateFormat(data) {
				if (this.$utils.isEmpty(data)) {
					return ''
				}
				return this.Request.dateFormat(new Date(data), 'Y-MM-dd');
			},
			BackDate(str) {
				return str.split("T")[0];
			},
			GetStatusBackClass(data) { // 根据传入的单据状态值，返回对应的class
				return 'OrderStatus_' + data
			},
			changeTab(item) { // 切换tab任务
				var that = this;
				this.searchData.value = item.data.value;

				// clearTimeout(that.TabTimer);
				clearTimeout(that.TabTimer);
				clearTimeout(that.timer);
				clearTimeout(that.SonTimer);
				clearTimeout(that.scrolltolowerTimer);
				that.TabTimer = setTimeout(() => {
					// that.OnSearch();
					that.$refs.paging.reload();
				}, 300)
			},
			ChoiceCell(data) { // 选中搜素字段

				this.SearchCheckList = this.SearchCheckList.map(item => {
					return {
						...item,
						Checked: item.value === data.value
					};
				})
				data.Checked = true;
				this.CheckedSearchData = data;
			},
			OnSearch() { // 搜索
				this.$refs.paging.reload();
			},
			handleData(Arr1, Arr2, Total) {
				let that = this;
				// 使用JSON.parse(JSON.stringify())或手动实现深拷贝（如果数据结构不复杂）  
				const AData = JSON.parse(JSON.stringify(Arr1));
				const BData = JSON.parse(JSON.stringify(Arr2));

				AData.forEach((aItem) => {
					const matchedItems = BData.filter((bItem) => bItem.JobOrderID === aItem.JobOrderID);
					matchedItems.forEach((item) => {
						if (typeof item.WCQty === 'number' && typeof item.FPlanQty === 'number') {
							if (!that.$utils.isEmpty(item.WCQty) && item.WCQty > 0) {
								// 使用toFixed来确保得到的是字符串形式的百分比 
								item.value = ((item.WCQty / item.FPlanQty) * 100).toFixed(2);
							} else {
								item.value = '0.00'
							}
						} else {
							item.value = '0.00'; // 确保value是一个字符串形式的百分比  
						}
						item.text = item.ProcedureName || '';
					});

					aItem.Children = matchedItems.sort((a, b) => a.FlowOrder - b.FlowOrder);
					if (matchedItems.length === 0) {
						aItem.Children = [];
					}
				});

				// setTimeout(() => {

				that.$refs.paging.complete(AData);

				that.$nextTick(() => {
					that.$utils.hideLoading(200);
				})
				// }, 200);
			},
			CircleClicked(data, index) { // 点击环形图选项

				// 调用工序明细接口，获取工序详情，用于展示
				let that = this;
				// console.log(data.JobOrderID)
				that.Request.request('XGD_SelectJonbDetails', {
					JobOrderID: data.JobOrderID
				}, ret => {
					// console.log(ret.data.ds1[index])
					if (ret.status == 200) {
						this.ProgressInfo = ret.data.ds1[index];
						this.showProcedure = true;
					}
				}, err => {

				})
			},
			closeProcedure() { // 关闭环形弹层
				this.showProcedure = false;
			},
			closeChangeStatus() { // 关闭三个小点的弹层
				this.ShowChangeStatus = false;
			},
			handleRadioChange(option) { // 自定义单选切换事件
				// console.log('Selected option:', option);
				this.selectedItem = option.Index;
			},
			groupChange(n) { // cell单选组件切换
				// console.log('groupChange', n);
			},
			closeSortPopup() { // 关闭排序弹层
				this.ShowSortPopup = false;
			},
			OpenSortPopup() { // 点击打开排序
				// console.log(this.defaultSort)
				this.ShowSortPopup = true;
			},
			handleSortChange(sortData) { // 选中排序
				// 在这里处理排序改变的逻辑
				this.sortData.OrderBy = sortData.sort['param'];
				this.defaultSort = sortData.sort['id'];
				this.sortData.Sort = sortData.item;
				// 关闭排序弹层
				this.ShowSortPopup = false;
				let SetInfo = {
					defaultSort: this.defaultSort,
					sortData: this.sortData,
				}
				uni.setStorageSync('Dispatch_Sort', JSON.stringify(SetInfo))
				// 
				// this.OnSearch();
				this.$refs.paging.reload();
			},
			closeFilterPopup() { // 关闭筛选弹层
				this.ShowFilterPopup = false;
			},
			OpenFilterPopup() { // 点击打开筛选
				this.ShowFilterPopup = true;
			},
			OpenPicker(str) { // 打开时间选择器
				let that = this;

				const pickMap = {
					'Start_Plan': that.CheckedTimes_Plan[0],
					'End_Plan': that.CheckedTimes_Plan[1],
					'Start_Actual': that.CheckedTimes_Actual[0],
					'End_Actual': that.CheckedTimes_Actual[1],
					'Start_BillDate': that.CheckedTimes_BillDate[0],
					'End_BillDate': that.CheckedTimes_BillDate[1],
				};

				if (pickMap.hasOwnProperty(str)) {
					that.CheckPick = str;
					that.PickerDate = !that.$utils.isEmpty(pickMap[str]) ? pickMap[str] : new Date()
						.getTime();
				}

				this.ShowPicker = true;

			},
			ClearPickerBtn(str) { // 清除对应时间选择器数据
				var that = this;
				if (str == 'Plan') {
					that.CheckedTimes_Plan = ["", ""];
				} else if (str == 'Actual') {
					that.CheckedTimes_Actual = ["", ""];
				} else if (str == 'BillDate') {
					that.CheckedTimes_BillDate = ["", ""];
				}
			},
			closePicker() { // 关闭时间选择器
				this.ShowPicker = false;
				this.PickerDate = null;
			},
			ConfirmPickerBtn(data) { // 时间选择器确认按钮
				var that = this;

				switch (that.CheckPick) {
					case 'Start_Plan':
						that.CheckedTimes_Plan[0] = data.value;
						break;
					case 'End_Plan':
						that.CheckedTimes_Plan[1] = data.value;
						break;
					case 'Start_Actual':
						that.CheckedTimes_Actual[0] = data.value;
						break;
					case 'End_Actual':
						that.CheckedTimes_Actual[1] = data.value;
						break;
					case 'Start_BillDate':
						that.CheckedTimes_BillDate[0] = data.value;
						break;
					case 'End_BillDate':
						that.CheckedTimes_BillDate[1] = data.value;
						break;
					default:
						break;
				}

				that.closePicker();
			},
			ResetBtn() { // 筛选弹层重置按钮
				let that = this;
				that.CheckedTimes_Plan = [];
				that.CheckedTimes_Actual = [];
				that.CheckedTimes_BillDate = [];
			},
			SubmitFilterBtn() { // 筛选确认按钮
				let that = this;

				let First_some = that.CheckedTimes_Plan.some(item => !that.$utils.isEmpty(item));
				let Second_some = that.CheckedTimes_Actual.some(item => !that.$utils.isEmpty(item));
				let Third_some = that.CheckedTimes_BillDate.some(item => !that.$utils.isEmpty(item));

				let FilterNums = [First_some, Second_some, Third_some].filter(item => item).length;

				that.FilterNums = FilterNums > 0 ? FilterNums : '';

				// this.OnSearch();
				this.$refs.paging.reload();
				this.closeFilterPopup();
			},
			ToScanBtn() { // 扫码
				let that = this;
				// const type = 'CAMERA' // 权限名称，其他权限看下面文档
				// this.$refs.permissionDialog.requestPermission(type).then(() => {
				// 完成授权流程，开始业务代码
				this.$scanPopup.openScan({
					success: (res) => {
						that.searchValue = res.result;

						// that.OnSearch();
						this.$refs.paging.reload();
					}
				})
				/* uni.scanCode({
					success: function(res) {
						that.searchValue = res.result;

						// that.OnSearch();
						this.$refs.paging.reload();
					}
				}); */
				// })
			},
		}
	}
</script>


<style lang="scss">
	.f-dc {
		display: flex;
		flex-direction: column;
	}

	.content {
		background-color: #eeeeee;
		// padding: 0 10px !important;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.MainList {
			flex: 1;
			overflow: auto;
			padding: 10px;
			position: relative;
		}


		// 顶部tab栏
		.TabsBox {
			padding: 10px 15px;
			background-color: #fff;
			border-bottom: 2px solid #eee;

			.u-tabs__wrapper__nav__item__text {
				padding: 4px 10px !important;
			}
		}

		.CardBox {
			position: relative;
			background-color: #fff;
			border-radius: 12px;
			padding: 10px !important;
			margin-top: 10px;
			// min-height: 200px;

			// 卡片盒子右上角图标
			.RightTop {
				position: absolute;
				right: 0;
				top: 0;
				width: 50px;
				height: 50px;
				line-height: 50px;
				border-radius: 8px;
				background-color: transparent;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				.IconBox {
					width: 30px;
					height: 30px;
					line-height: 30px;
					border-radius: 8px;
					background-color: #f1f1f1;
					text-align: center;
				}
			}

			.CardMainBox {
				display: flex;
				flex-direction: column;

				.CardTop {

					.OrderStatus {
						font-size: 24rpx;
						font-weight: 600;
						padding: 6rpx 12rpx;
						border-radius: 99999px;
						width: fit-content;
						min-width: 100rpx;
						text-align: center;
						letter-spacing: 2rpx;

						background-color: #e8e8e8;
						color: #3c3c3c;
					}

					/* 未生产 */
					.OrderStatus_0 {
						background-color: #e8e8e8;
						color: #3c3c3c;
					}

					/* 结束 */
					.OrderStatus_1 {
						background-color: #d9f5ec;
						color: #269b74;
					}

					/* 已领料 */
					.OrderStatus_2 {
						background-color: #adf0eb;
						color: #1696eb;
					}

					/* 生产中 */
					.OrderStatus_3 {
						background-color: #d7eefc;
						color: #1d87cf;
					}

					/* 指定结束 */
					.OrderStatus_-1 {
						background-color: #f5fccd;
						color: #d0d30b;
					}
				}
			}

		}
	}


	.item {
		padding: 10px;
		text-align: center;
		border-bottom: 1px solid #eeeeee;
	}

	.SearchBox {
		background-color: #fff;
		background-color: #51d0d0;
		padding: 6px 10px;

		.MenuText {
			font-size: 14px;
			border-right: 1px solid #999;
			padding-right: 10px;
			margin-right: 4px;

			.rotate-icon {
				/* 使用transform属性旋转180度 */
				transform: rotate(180deg);
				/* 如果需要过渡效果，可以添加transition属性 */
				transition: transform 0.3s ease;
			}
		}
	}


	.MainBox {
		flex: 1;
		overflow: auto;
	}

	.BottomBox {
		height: 70px;
		line-height: 70px;
		padding: 6px 15px;
		border-top: 1px solid #efefef;
		display: flex;
		align-items: center;
		background-color: #fff;

		.SaveBtn {
			width: 40%;
			background-color: #fff;
			color: #51d0d0;
			border: 1px solid #51d0d0;
			border-radius: 12px;
		}

		.SubBtn {
			width: 40%;
			background-color: #51d0d0;
			color: #fff;
			border-radius: 12px;
		}
	}

	.MainPopup {
		flex: initial !important;

		.u-transition {
			z-index: 99999 !important;
		}

		.ProgressBox {
			display: flex;
			flex-direction: column;
			padding: 20px;
			min-width: 70vw;
			position: relative;

			.Type {
				border-radius: 14px;
				font-weight: 600;
				padding: 4px 8px;
				font-size: 14px;
				position: absolute;
				top: 16px;
				right: 20px;
				// background-color: #e5e5e5;
				// color: #333;
			}

			// 未报工
			.Type_0 {
				background-color: #e8e8e8;
				color: #3c3c3c;
			}

			// 已完成
			.Type_1 {
				background-color: #d9f5ec;
				color: #269b74;
			}

			// 指定完成
			.Type_-1 {
				background-color: #f5fccd;
				color: #d0d30b;
			}

			// 部分报工
			.Type_2 {
				background-color: #d7eefc;
				color: #1d87cf;
			}

			.TitleName {
				// font-size: 16px;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.PickerClass {
			flex: initial !important;
		}

		.PopupMainBox {
			padding: 15px;
			flex: 1;
			overflow: auto;
			padding-bottom: 20px;

			.CheckBox {
				margin-top: 20px;
			}


			.My_Picker_Box {
				padding: 6px 4px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #e5e5e5;
				border-radius: 4px;

				.PickMainBox {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 14px;
					color: #666;

					.My_Picker_Text {
						flex: 1;
						text-align: center;
					}
				}
			}
		}

		.MainBox {
			padding: 0px 2px;
			flex: 1;
			overflow: auto;
		}

	}
</style>